<template>
  <div class="product-attr-group">
    <el-row :gutter="15" type="flex" align="top">
      <el-col :span="6">
        <el-card>
          <el-scrollbar>
            <el-tree ref="categoryTree" :data="categoryData" accordion highlight-current node-key="value" :props="defaultProps" @current-change="currentChange">
              <span slot-scope="{ node, data }">
                <i :class="data.icon" />
                <span style="padding-left: 4px;">{{ node.label }}</span>
              </span>
            </el-tree>
          </el-scrollbar>
        </el-card>
      </el-col>
      <el-col :span="18">
        <ComplexTable
          ref="attr-group-table"
          :query-model="queryModel"
          :table-column-is-show="tableColumnIsShow"
          :create-permission="['pms:attr-group:create']"
          @onAddPage="addPage"
          @onSearch="search"
        >
          <template v-slot:search_from_input>
            <el-form-item label="属性分组名称" prop="name">
              <el-input
                v-model="queryModel.name"
                placeholder="分组名称"
                clearable
              />
            </el-form-item>
          </template>

          <template v-slot:table_column>
            <el-table-column
              type="selection"
              width="40"
            />

            <el-table-column
              v-if="tableColumnIsShow.name.isShow"
              prop="name"
              label="属性分组名称"
              align="center"
              header-align="center"
            />

            <el-table-column
              v-if="tableColumnIsShow.sort.isShow"
              prop="sort"
              label="排序"
              align="center"
              header-align="center"
            />
            <el-table-column
              v-if="tableColumnIsShow.categoryName.isShow"
              prop="categoryName"
              label="分类名称"
              align="center"
              header-align="center"
            />
            <el-table-column
              v-if="tableColumnIsShow.description.isShow"
              prop="description"
              label="描述"
              align="center"
              header-align="center"
            />
            <el-table-column
              label="操作"
              width="300"
              align="center"
              header-align="center"
            >
              <template slot-scope="scope">

                <TableBtn :parameter="scope.row.id" :edit-permission="['pms:attr-group:update' ]" :del-permission="['pms:attr-group:delete' ]" @onDel="del" @onEditPage="editPage">
                  <template v-slot:table_btn>
                    <el-button v-permission="['pms:attr-group:relation']" class="pan-btn green-btn" icon="el-icon-connection" @click="editRelation(scope.row)">关联</el-button>
                  </template>
                </TableBtn>
              </template>
            </el-table-column>
          </template>
        </ComplexTable>
      </el-col>
    </el-row>
    <!--弹出框-->
    <MyEditDialog :dialog-visible="dialogVisible" :title="title" width="880px" @onDialogSave="save" @onGoBack="dialogVisible=false" @onBeforeClose="dialogVisible=false">
      <template v-slot:dialog_content>
        <EditForm v-if="dialogVisible" ref="EditForm" :edit-model="editFormModel" :validate="formValidate" />
      </template>
    </MyEditDialog>

    <!--关联属性弹框-->
    <MyEditDialog :dialog-visible="relationDialogVisible" :title="relationTitle" width="1200px" :is-btn="false" @onBeforeClose="relationDialogVisible=false">
      <template v-slot:dialog_content>
        <RelationPage v-if="relationDialogVisible" ref="relation" :category-id="defaultCategoryId" />
      </template>
    </MyEditDialog>

  </div>
</template>
<script>
import ComplexTable from '@/components/ComplexTable'
import { findAllCategoryREQ } from '@/api/product/category'
import { pageAttrGroupREQ, createAttrGroupREQ, getAttrGroupByIdREQ, updateAttrGroupREQ, deleteAttrGroupREQ } from '@/api/product/attr-group'
import { listToTree } from 'tree-walk-util'
import MyEditDialog from '@/components/MyEditDialog'
import { editValidate, addValidate } from './validate'
import TableBtn from '@/components/TableBtn'
import deepcopy from 'deepcopy'
import EditForm from './EditForm'
import RelationPage from './RelationPage'
import permission from '@/directive/permission/index.js'
export default {
  name: 'GROUP',
  components: { ComplexTable, MyEditDialog, EditForm, TableBtn, RelationPage },
  directives: {
    permission
  },
  data() {
    return {
      relationDialogVisible: false,
      relationTitle: '关联属性',
      categoryData: null,
      defaultCategoryId: '',
      defaultProps: {
        children: 'children',
        label: 'text',
        disabled: 'disabled',
        value: 'value'
      },
      tableColumnIsShow: {
        name: { label: '分组名称', isShow: true },
        sort: { label: '排序', isShow: true },
        categoryName: { label: '分类名称', isShow: true },
        description: { label: '备注', isShow: true }

      },
      dialogVisible: false,
      title: '',
      editFormModel: {},
      formValidate: {},
      queryModel: {
        name: '',
        categoryId: ''
      },
      defaultEditForm: {
        name: '',
        sort: 0,
        description: '',
        categoryId: ''
      }

    }
  },
  computed: {},
  mounted() {
    this.findAllCategory()
  },
  methods: {
    findAllCategory() {
      findAllCategoryREQ().then(data => {
        if (!data || data.length === 0) return
        const tempData = listToTree(data, 'value', 'parentId', 'children').children
        this.categoryData = tempData
      })
    },
    save(editFormModel) {
      this.$refs['EditForm'].$refs['EditForm'].validate((valid) => {
        if (valid) {
          if (this.editFormModel.id) {
            updateAttrGroupREQ(this.editFormModel).then(v => {
              this.findAllCategory()
              this.$refs['attr-group-table'].onSearch()
              this.dialogVisible = false
            })
          } else {
            createAttrGroupREQ(this.editFormModel).then(v => {
              this.findAllCategory()
              this.$refs['attr-group-table'].onSearch()
              this.dialogVisible = false
            })
          }
        }
      })
    },
    del(id) {
      if (id) {
        deleteAttrGroupREQ(id).then(v => {
          this.search({ current: 1 })
        })
      }
    },
    editPage(id) {
      if (id) {
        this.title = '编辑属性分组信息'
        getAttrGroupByIdREQ(id).then(data => {
          this.editFormModel = deepcopy(data)
          this.dialogVisible = true
          this.formValidate = editValidate
        })
      }
    },
    addPage() {
      this.title = '新增属性分组信息'
      this.editFormModel = deepcopy(this.defaultEditForm)
      const _node = this.$refs['categoryTree'].getCurrentNode()
      const { value } = _node || { value: null }
      this.editFormModel.categoryId = value
      this.dialogVisible = true
      this.formValidate = addValidate
    },
    currentChange(row) {
      if (this.queryModel.categoryId === row.value) {
        this.$refs['categoryTree'].setCurrentKey(null)
        this.queryModel.categoryId = ''
      } else {
        this.queryModel.categoryId = row.value
      }
      this.$refs['attr-group-table'].currentChange(1)
    },
    search(queryModel) {
      pageAttrGroupREQ(queryModel).then((data) => {
        // 双重认证
        if (this.$refs['attr-group-table']) { this.$refs['attr-group-table'].setTableAndPage(data) }
      })
    },
    editRelation(row) {
      if (row || row.categoryId) {
        this.defaultCategoryId = row.categoryId
        this.relationDialogVisible = true
      }
    }
  }
}

</script>
<style lang='scss' scoped>
</style>
